<template>
  <view class="ku-ge">
    <view class="ku-wuge">
      <!--@tap="clickTab({ index: item.weizhi, id: item._jv.id, name: item.name, item: item })"-->
      <block
        v-for="(item, index) in img"
        :key="index"
        v-if="item.value > 1"
      >
        <view :class="'ku-wuge-'+hangshu" v-if="item.value === 2">
          <navigator :url="item.url">
            <view class="ku-tu">
              <img v-if="index == 0" :src="imgurl && imgurl.site_img0" />
              <img v-if="index == 1" :src="imgurl && imgurl.site_img1" />
              <img v-if="index == 2" :src="imgurl && imgurl.site_img2" />
              <img v-if="index == 3" :src="imgurl && imgurl.site_img3" />
              <img v-if="index == 4" :src="imgurl && imgurl.site_img4" />
            </view>
            <span class="kuzi">{{ item.name }}</span>
          </navigator>
        </view>
        <view :class="'ku-wuge-'+hangshu" v-if="item.value === 3">
          <navigator :url="'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz='+item.url" hover-class="none">
            <view class="ku-tu">
              <img v-if="index == 0" :src="imgurl && imgurl.site_img0" />
              <img v-if="index == 1" :src="imgurl && imgurl.site_img1" />
              <img v-if="index == 2" :src="imgurl && imgurl.site_img2" />
              <img v-if="index == 3" :src="imgurl && imgurl.site_img3" />
              <img v-if="index == 4" :src="imgurl && imgurl.site_img4" />
            </view>
            <span class="kuzi">{{ item.name }}</span>
          </navigator>
        </view>
        <view :class="'ku-wuge-'+hangshu" v-if="item.value === 4">
          <navigator :url="item.url" hover-class="none">
            <view class="ku-tu">
              <img v-if="index == 0" :src="imgurl && imgurl.site_img0" />
              <img v-if="index == 1" :src="imgurl && imgurl.site_img1" />
              <img v-if="index == 2" :src="imgurl && imgurl.site_img2" />
              <img v-if="index == 3" :src="imgurl && imgurl.site_img3" />
              <img v-if="index == 4" :src="imgurl && imgurl.site_img4" />
            </view>
            <span class="kuzi">{{ item.name }}</span>
          </navigator>
        </view>
        <view :class="'ku-wuge-'+hangshu" v-if="item.value === 5">
          <view @click="waiurl(item.url)">
            <view class="ku-tu">
              <img v-if="index == 0" :src="imgurl && imgurl.site_img0" />
              <img v-if="index == 1" :src="imgurl && imgurl.site_img1" />
              <img v-if="index == 2" :src="imgurl && imgurl.site_img2" />
              <img v-if="index == 3" :src="imgurl && imgurl.site_img3" />
              <img v-if="index == 4" :src="imgurl && imgurl.site_img4" />
            </view>
            <span class="kuzi">{{ item.name }}</span>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    hangshu: {
      type: String,
      default: 0,
    },
    handleClickOpenList: {
      type:[Function],
      default:()=>{}
    },
    img: {
      type: Array,
      default: () => {
        return [];
      },
    },
    imgurl: {
      type: [Array, Object],
      default: () => {
        return [];
      },
    },
    // 需循环的标签列表
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    lista: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      id: this.$u.guid(), // id值
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      // 获取tabs组件的尺寸信息
      const tabRect = await this.$uGetRect(`#${this.id}`);
      // tabs组件距离屏幕左边的宽度
      this.parentLeft = tabRect.left;
      // tabs组件的宽度
      this.componentWidth = tabRect.width;
      this.getTabRect();
    },
    waiurl(e) {
      window.location.href=`${e}`;
    },
    // 点击某一个tab菜单
     clickTab(dataInfo) {
      // #ifdef MP-WEIXIN
      this.$emit('handleclickopenlist',dataInfo);
      // #endif
      this.$emit('change', dataInfo);
      // 发送事件给父组件
      this.currentIndex = dataInfo.index;
      // #ifdef H5
      this.handleClickOpenList(dataInfo,0);
      // #endif
      // this.navShow = true;
    },
  },
}
</script>
<style lang="scss">
  @import '@/styles/base/variable/global.scss';
  @import '@/styles/base/theme/fn.scss';
  .ku-ge {
    margin: 20rpx 20rpx 0 20rpx;
  }
	.ku-wuge {
    width: 100%;
    background-color: --color(--qui-BG-2);
    /*padding: 40rpx;*/
    /*margin: 40rpx 30rpx;*/
    background: --color(--qui-BG-2);
    border-radius: 20rpx;
    /*float:left;*/
    display: flex;
    justify-content: center;
    align-items: flex-end;
	}

	.ku-wuge-5 {
		width: 20%;
    float:left;
    text-align:center;
    padding: 20rpx 0 20rpx 0;
	}
  .ku-wuge-4 {
  	width: 25%;
    float:left;
    text-align:center;
    padding: 20rpx 0 20rpx 0;
  }
  .ku-tu {
    width: 100%;
    text-align:center;
  }
  .ku-tu img{
    width: 70rpx;
    height: 70rpx;
    text-align:center;
  }
  .kuzi {
    width: 100%;
    text-align:center;
    font-size: 28rpx;
    color: #a2a2a2;
  }
</style>
